<template>
    <div class="main">
        <div class="air-column">
            <h2>乘机人</h2>

            <el-form class="member-info">
                <!-- 表单只有一个 -->
                <!-- 这里的 div 可以跟随数组的长度进行遍历 -->
                <div class="member-info-item"
                  v-for="(user,index) in users"
                  :key="index"
                >
                    <el-form-item label="姓名">
                        <el-input
                            v-model="user.username"
                            placeholder="请输入乘机人姓名"
                            class="input-with-select"
                        >
                        </el-input>
                    </el-form-item>

                    <el-form-item label="身份证">
                        <el-input
                            v-model="user.id"
                            placeholder="填写身份证号码"
                            class="input-with-select"
                        >
                        </el-input>
                    </el-form-item>

                    <span class="delete-user" @click="handleDeleteUser(index)"
                        >-</span
                    >
                </div>
            </el-form>

            <el-button class="add-member" type="primary" @click="handleAddUsers"
                >添加乘机人</el-button
            >
        </div>

        <div class="air-column">
            <h2>保险</h2>
            <el-checkbox-group v-model="insurances">
                <div class="insurance-item" v-for="item in data.insurances"
                :key="item.id">
                    <el-checkbox
                        :label="item.id"
                        border
                    >
                    {{item.type}}:￥{{item.price}}/份 x {{users.length}} 最高赔付 {{item.compensation}}
                    </el-checkbox>
                </div>
            </el-checkbox-group>
            <h2>发票</h2>
            <el-checkbox
                v-model="invoice"
            >申请发票</el-checkbox>
        </div>

        <div class="air-column">
            <h2>联系人</h2>
            <div class="contact">
                <el-form label-width="60px">
                    <el-form-item label="姓名">
                        <el-input v-model="contactName"></el-input>
                    </el-form-item>

                    <el-form-item label="手机">
                        <el-input placeholder="请输入内容" v-model="contactPhone">
                            <template slot="append">
                                <el-button @click="handleSendCaptcha"
                                    >发送验证码</el-button
                                >
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="验证码">
                        <el-input v-model="captcha"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="warning" class="submit" @click="handleSubmit"
                    >提交订单</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['data'],
        data () {
          return {
            // 乘机人应该是一个数组
            // 里面的每个对象都是一个乘机人
            // 添加删除的实话, 只需要 push / splice  
            users:[
              {
                username:'小王',
                id:'425641254512345689'
              }
            ],
            insurances:[],
            contactName:'虞姬',
            contactPhone:'13588888888',
            captcha:'000000',
            invoice:false
          }
        },
        // watch 默认不变化不触发
        // 解决方案一, 手动在创建时触发一次
        // created() {
        //     this.calcTotalPrice();
        // },
        watch: {
          // users(){
          //   // 计算总价格
          //   console.log('乘机人变化了');
          //   this.calcTotalPrice()
          // },
          // 可以讲一个 watch 改成进来马上触发一次
          users:{
            handler(){
              this.calcTotalPrice()
            },
            immediate:true
          },
          insurances(){
            console.log('保险变化了');
            this.calcTotalPrice()
          }
        },
        methods: {
            // 计算总价格
            calcTotalPrice(){
              let res = 0
              // 机票总价
              res += this.data.base_price * this.users.length
              console.log(res);
               // 当前被选中的保险是 this.insurances, 需要遍历能够拿到选中的 id
              this.insurances.forEach(idSelected=>{
                 // 这里拿到id 需要到原来总的保险数据中查找出对应的价格
                  // 当前所有保险数据在 this.data.insurances, 可以拿到每个保险的对象
                  this.data.insurances.forEach(element=>{
                    console.log(element);
                    res += element.price * this.users.length
                  })
              })
              console.log(res);
              this.$emit('setTotalPrice',res)
            },
            handleSubmit() {
                console.log("提交请求");
                // console.log(this.users);
                // console.log(this.insurances);
                // console.log(this.contactName);
                // console.log(this.contactPhone);
                // console.log(this.captcha);
                const data = {
                  users:this.users,
                  insurances:this.insurances,
                  contactName:this.contactName,
                  contactPhone:this.contactPhone,
                  invoice:this.invoice,
                  seat_xid:this.$route.query.seat_xid,
                  air:this.$route.query.id,
                  // 文档少了验证码，自己加上
                  captcha:this.captcha
                }
                this.$axios({
                  method:'post',
                  url:'/airorders',
                  data,
                  headers:{
                    Authorization:'Bearer ' + this.$store.state.userstore.userInfo.token
                  }
                }).then(res=>{
                  console.log(res.data);
                })
            },
            handleAddUsers() {
              this.users.push({
                username:'',
                id:''
              })
            },
            handleDeleteUser(index) {
              this.users.splice(index,1)
            },
            handleSendCaptcha() {
              this.$axios({
                url:'/captchas',
                method:'post',
                data:{
                  tel:this.contactPhone
                }
              }).then(res=>{
                console.log(res.data);
                if(res.data.code){
                  this.$message.success('获取到验证码：' + res.data.code)
                }
              })
            }
        },
    };
</script>

<style scoped lang="less">
    .air-column{
        border-bottom:1px #ddd dashed;
        padding-bottom: 20px;   
        margin-bottom: 20px;
    }

    .air-column h2{
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: normal;
    }

    /deep/ .el-select .el-input {
        width: 130px;
    }

    .input-with-select{
        width:590px;
    }

    .input-with-select /deep/  .el-input-group__prepend {
        background-color: #fff;
    }
    .member-info /deep/ .el-form-item{
        margin-bottom:0;
    }

    // 这里是每个乘机人的外容器
    .member-info-item{
        border-bottom:1px #eee dashed;
        padding-bottom: 20px;
        position: relative;

        &:first-child{
            .delete-user{
                display: none;
            }
        }
    }

    .add-member{
        margin-top:20px;
    }

    .delete-user{
        display: block;
        background:#ddd;
        width:16px;
        height:16px;
        font-size:14px;
        text-align: center;
        line-height: 16px;
        color:#fff;
        cursor: pointer;
        border-radius: 50px;
        position:absolute;
        right:-30px;
        top:50%;
    }

    .insurance{
        > div{
            margin-top:10px;
        }
    }

    .insurance-item{
        margin-bottom: 20px;
    }

    .contact{
        /deep/ .el-input{
            width:50%;
        }
    }

    .submit{
        margin: 50px auto;
        display: block;
        width:250px;
        height:50px;
    }
</style>